<template>
  <div>
    <br>
    <el-table
      :data="Goods"
      stripe border style="width:100%" highlight-current-row>
      <el-table-column label="商品信息查看" align="center">
        <el-table-column
          prop="goods"
          label="商品"
          width="180">
        </el-table-column>
        <el-table-column
          prop="img"
          label="图片">
          <template slot-scope="scope">
            <img style="width:80px;height:100px" :src=scope.row.img>
          </template>
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>

        <el-table-column
          prop="introduction"
          label="介绍">
        </el-table-column>

<!--        <el-table-column-->
<!--          prop="size"-->
<!--          label="鞋号">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="sex"-->
<!--          label="款式">-->
<!--        </el-table-column>-->

        <el-table-column
          prop="type"
          label="类型">
        </el-table-column>

        <el-table-column
          prop="operate"
          label="执行操作">
          <!--获取插槽上的属性值-->
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row.id)">更新</el-button>
            <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "CommodityInformation",
    data()
    {
      return {
        centerDialogVisible: false,
        showClose: true,
        update: false,
        x: 0,
        message: 0,
        Goods: [],
        // good: {
        //   goods: '',
        //   img: '',
        //   brand: '',
        //   price: '',
        //   introduction: '',
        //   size: 0,
        //   type: '',
        // }
      }
    },
    mounted()
    {
      this.check()
    },
    methods:{
      check()
      {
        this.$http.post('http://localhost:8888/shopping').then(res =>
        {
          this.Goods = res.data.data;
          // console.log(this.Goods)
        });
      },
    }
    // props: ["whats"],  袁冰炎
    // mounted()
    // {
    //   this.$http.post("http://localhost:8888/showAllPerson").then((data) =>
    //   {
    //     //获得数据库中的数据
    //     let a = Array.from(data.body)
    //     for (const key in a)
    //     {
    //       // console.log()
    //       this.tableData.push(a[key])
    //     }
    //   })
    // },
    // data()
    // {
    //   return {
    //     label: "人员管理",
    //     tableData: [],
    //     // personData:''
    //   }
    // },
    // methods: {
    //   update: function (e)
    //   {
    //     this.$http.post("http://localhost:8888/showPersonById", e).then((e) =>
    //     {
    //       this.$router.push({name: '人员信息录入', params: e.body});
    //     })
    //   },
    //   deleteData: function (e)
    //   {
    //     this.$http.post("http://localhost:8888/deletePerson", e).then((e) =>
    //     {
    //       if (e.body.trim() === "success")
    //       {
    //         alert("删除成功！")
    //         this.$router.go(0)
    //         this.$router.push({path: "/UserInforLook"})
    //       }
    //     })
    //   },
    // }
  }
</script>

<style scoped>

</style>
<!--<template>-->
<!--  <div>-->
<!--    <br>-->
<!--    <el-table-->
<!--      :data="tableData"-->
<!--      stripe border style="width:100%" highlight-current-row>-->
<!--      <el-table-column label="信息查看" align="center">-->
<!--        <el-table-column-->
<!--          prop="goods"-->
<!--          label="用户名"-->
<!--          width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="brand"-->
<!--          label="密码"-->
<!--          width="180">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="price"-->
<!--          label="性别">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="sex"-->
<!--          label="出生日期">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="size"-->
<!--          label="是否管理员">-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="sex"-->
<!--          label="简介">-->
<!--        </el-table-column>-->

<!--        <el-table-column>-->
<!--          &lt;!&ndash;          prop="img"&ndash;&gt;-->
<!--          label="图片" >-->
<!--          <template slot-scope="scope">-->
<!--            <img style="width:80px;height:100px" :src=scope.row.img>-->
<!--            &lt;!&ndash;              <img style="width:80px;height:100px" src="../../assets/1.png">&ndash;&gt;-->
<!--            &lt;!&ndash;              {{scope.row.img}}&ndash;&gt;-->
<!--            &lt;!&ndash;              <img src="../../assets/queen.png">&ndash;&gt;-->
<!--          </template>-->

<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="operate"-->
<!--          label="执行操作">-->
<!--          &lt;!&ndash;获取插槽上的属性值&ndash;&gt;-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="text" @click="update(scope.row.id)">更新</el-button>-->
<!--            <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  export default {-->
<!--    name: "UserInforLook",-->
<!--    props: ["whats"],-->
<!--    mounted()-->
<!--    {-->
<!--      this.$http.post("http://localhost:8888/showAllPerson").then((data) =>-->
<!--      {-->
<!--        //获得数据库中的数据-->
<!--        let a = Array.from(data.body)-->
<!--        for (const key in a)-->
<!--        {-->
<!--          // console.log()-->
<!--          this.tableData.push(a[key])-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    data()-->
<!--    {-->
<!--      return {-->
<!--        label: "人员管理",-->
<!--        tableData: [],-->
<!--        // personData:''-->
<!--      }-->
<!--    },-->
<!--    methods: {-->
<!--      update: function (e)-->
<!--      {-->
<!--        this.$http.post("http://localhost:8888/showPersonById", e).then((e) =>-->
<!--        {-->
<!--          this.$router.push({name: '人员信息录入', params: e.body});-->
<!--        })-->
<!--      },-->
<!--      deleteData: function (e)-->
<!--      {-->
<!--        this.$http.post("http://localhost:8888/deletePerson", e).then((e) =>-->
<!--        {-->
<!--          if (e.body.trim() === "success")-->
<!--          {-->
<!--            alert("删除成功！")-->
<!--            this.$router.go(0)-->
<!--            this.$router.push({path: "/UserInforLook"})-->
<!--          }-->
<!--        })-->
<!--      },-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style scoped>-->
<!--  td {-->
<!--    width: 120px;-->
<!--  }-->
<!--</style>-->
